<template>
    <div class="online-user-container">
        <a-drawer 
                width="65%" 
                placement="right" 
                :open="state.open" 
                @close="onClose"
                :closable="false"
                class="theme-config-drawer"
                :bodyStyle="{padding:'10px'}"
                :headerStyle="{padding:'10px'}"
        >
                <template #title>
                    在线用户列表
                </template>
                <template #extra>
                    <CloseOutlined @click="onClose"/>
                </template>
                <div class="online-user">
                    <a-card hoverable >
                        <a-form
                            class="mb-2.5"
                            layout="inline"
                            :model="state.queryForm"
                            name="online-user-form"
                            autocomplete="off"
                            @finish="onFinish"
                        >
                            <a-form-item
                                v-if="userInfoStore.state.userInfos.accountType === 999"
                                label="租户"
                                name="tenantId"
                                class="w-1/3"
                            >
                                <a-select v-model:value="state.queryForm.tenantId" placeholder="">
                                    <a-select-option
                                        v-for="item in state.tenantList"
                                        :key="item.value"
                                        :value="item.value">
                                        {{item.label}}    
                                    </a-select-option>
                                </a-select>
                            </a-form-item>
                            <a-form-item
                                label="账号"
                                name="userName"
                                class="w-1/2.5"
                            >
                                <a-input v-model:value="state.queryForm.userName" />
                            </a-form-item>
                            <a-form-item
                                label="姓名"
                                name="realName"
                                class="w-1/2.5"
                            >
                                <a-input v-model:value="state.queryForm.realName" />
                            </a-form-item>

                            <a-form-item>
                                <a-button type="primary" html-type="submit" @click="handleQuery">搜素</a-button>
                                <a-button class="ml-2.5" @click="handleReset">重置</a-button>
                            </a-form-item>
                        </a-form>
                        <a-table 
                            :loading="state.loading"
                            :columns="state.columns" 
                            :data-source="state.tableData"
                            :pagination="{
                                total: state.tableParams.total,
                                current: state.tableParams.page,
                                pageSize: state.tableParams.pageSize,
                                showQuickJumper: true,
                                showSizeChanger: true,
                            }"
                            @change="changePagination"
                        >
                            <template #bodyCell="{ column, text, record }">
                                <template v-if="column.dataIndex === 'operation'">
                                    <a-popconfirm
                                        title="确定下线?"
                                        @confirm="()=>{}"
                                    >
                                        <a-button danger>下线</a-button>
                                    </a-popconfirm>
                                </template>
                            </template>
                        </a-table>
                    </a-card>
                </div>
        </a-drawer>
    </div>
</template>

<script setup lang="ts">
import { reactive,onMounted } from 'vue';
import {signalR} from '@/utils/signalR'
import {apiSysOnlineUserPagePost} from '@/api/sys/sysOnlineUser'
import type {ResType} from '@/api/types/index'
import type {TableParamsResType,TenantListType,StateType,ItemType} from './type/index'
import {useUserInfo} from '@/stores/userInfo'
import {apiSysTenantListGet} from '@/api/sys/sysTenant'
import { apiSysAuthLogoutPost } from '@/api/sys/sysAuth';
import { clearToken } from '@/utils';

const userInfoStore = useUserInfo()
const state = reactive<StateType>({
    open: false,
    queryForm:{
        tenantId:undefined,
        userName:"",
        realName:""
    },
    tableParams:{
        page:1,
        pageSize:10,
        total:0
    },
    columns:[
        {
            title: '序号',
            dataIndex: 'index',
            width: 60,
            customRender: ({ index }:any) => {
                return (state.tableParams.page - 1) * state.tableParams.pageSize + index + 1;
            },
            align: 'center',
        },
        {
            title: '租户',
            dataIndex: 'userName',
            key: 'userName',
            align: 'center',
        },
        {
            title: '姓名',
            dataIndex: 'realName',
            key: 'realName',
            align: 'center',
        },
        {
            title: 'IP地址',
            dataIndex: 'ip',
            key: 'ip',
            align: 'center',
        },
        {
            title: '浏览器',
            dataIndex: 'browser',
            key: 'browser',
            align: 'center',
        },
        {
            title: '登录时间',
            dataIndex: 'time',
            key: 'time',
            align: 'center',
        },
        {
            title: '操作',
            dataIndex: 'operation',
            align: 'center',
        },
    ],
    tableData:[],
    loading:false,
    tenantList:[]
});

const onClose = () => {
    state.open = false;
};

const onOpen = ()=>{
    state.open = true;
}

const onFinish = (values: any) => {
    console.log('Success:', values);
};


const receiveNotice = (msg:any)=>{  
    console.log(msg)
}

const changePagination = (pagination:{current:number,pageSize:number})=>{
    state.tableParams.page = pagination.current
    state.tableParams.pageSize = pagination.pageSize
    handleQuery()
}

const handleQuery = async ()=>{
    state.loading = true
    const newParams = Object.assign({},state.tableParams,state.queryForm)
    const res = await apiSysOnlineUserPagePost({...newParams}) as ResType<TableParamsResType<ItemType>>
    state.tableParams.page = res.data.result.page
    state.tableParams.pageSize = res.data.result.pageSize
    state.tableParams.total = res.data.result.total
    state.tableData = res.data.result.items
    state.loading = false
}
const handleReset = ()=>{
    state.queryForm = {
        tenantId:state.tenantList[0].value || undefined,
        userName:"",
        realName:""
    }
    handleQuery()
}

onMounted(async()=>{
    if(userInfoStore.state.userInfos.accountType === 999){
        const res = await apiSysTenantListGet() as ResType<TenantListType>
        state.tenantList = res.data.result
        state.queryForm.tenantId = res.data.result[0].value; //默认激活第一个
    }
    await handleQuery()
    // 在线用户列表
	signalR.off('OnlineUserList');
	signalR.on('OnlineUserList', (data: any) => {
	});
    // 强制下线
	signalR.off('ForceOffline');
	signalR.on('ForceOffline', async (data: any) => {
		await signalR.stop();
        await apiSysAuthLogoutPost()
        clearToken()
        window.location.reload()
	});
})

defineExpose({
    onOpen
})
</script>

<style lang="scss" scoped>
:deep(.ant-form-item){
    margin-bottom: 10px
}
</style>